<div class="container mdl-cell--4-col-phone mdl-cell--8-col-tablet">
  <alfresco-upload-drag-area
    [rootFolderId]="documentList.currentFolderId"
    [versioning] = "versioning"
    (onSuccess)="documentList.reload()">
    <alfresco-document-list-breadcrumb
      [target]="documentList"
      [folderNode]="documentList.folderNode">
    </alfresco-document-list-breadcrumb>
    <div *ngIf="errorMessage" class="error-message">
      <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">highlight_off</i>
      </button>
      <span class="error-message--text">{{errorMessage}}</span>
    </div>
    <!--h5>Upload</h5-->
      <br>
      <div *ngIf="acceptedFilesTypeShow">
      <label class="mdl-input__label">Extension accepted
        <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
      </label>
      <br/>
    </div>
    <div *ngIf="!acceptedFilesTypeShow">
      <alfresco-upload-button data-automation-id="multiple-file-upload"
                              [rootFolderId]="documentList.currentFolderId"
                              [multipleFiles]="multipleFileUpload"
                              [uploadFolders]="folderUpload"
                              [versioning] = "versioning"
                              (onSuccess)="documentList.reload()">
        <div class="mdl-spinner mdl-js-spinner is-active"></div>
      </alfresco-upload-button>
    </div>
    <div *ngIf="acceptedFilesTypeShow">
      <alfresco-upload-button data-automation-id="multiple-file-upload"
                              [rootFolderId]="documentList.currentFolderId"
                              [acceptedFilesType]="acceptedFilesType"
                              [multipleFiles]="multipleFileUpload"
                              [uploadFolders]="folderUpload"
                              [versioning] = "versioning"
                              (onSuccess)="documentList.reload()">
        <div class="mdl-spinner mdl-js-spinner is-active"></div>
      </alfresco-upload-button>
    </div>
    <br>
    <alfresco-document-list
      #documentList
      [currentFolderId]="currentFolderId"
      [contextMenuActions]="true"
      [contentActions]="true"
      (error)="onNavigationError($event)"
      (success)="resetError()"
      (preview)="showFile($event)">
      <content-columns>
        <content-column key="$thumbnail" type="image"></content-column>
        <content-column
          title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
          key="name"
          sortable="true"
          class="full-width ellipsis-cell">
          <!-- Example of using custom column template -->
          <!--
          <template let-entry="$implicit">
              <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
          </template>
          -->
        </content-column>
        <content-column
          title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
          key="id"
          sortable="true"
          class="full-width ellipsis-cell">
          <template let-entry="$implicit">
            <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
          </template>
        </content-column>
        <content-column
          title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
          key="createdByUser.displayName"
          sortable="true"
          class="desktop-only">
        </content-column>
        <content-column
          title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
          key="createdAt"
          type="date"
          format="medium"
          sortable="true"
          class="desktop-only">
        </content-column>
      </content-columns>

      <content-actions>
        <!-- folder actions -->
        <content-action
          target="folder"
          title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
          handler="system1">
        </content-action>
        <content-action
          target="folder"
          title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
          (execute)="myFolderAction1($event)">
        </content-action>
        <content-action
          target="folder"
          title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
          handler="delete">
        </content-action>
        <!-- document actions -->
        <content-action
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
          handler="download">
        </content-action>
        <content-action
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
          handler="system2">
        </content-action>
        <content-action
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
          (execute)="myCustomAction1($event)">
        </content-action>
        <content-action
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
          handler="delete">
        </content-action>
        <content-action
          target="folder"
          title="Process Services: View Form"
          (execute)="viewActivitiForm($event)">
        </content-action>
      </content-actions>
    </alfresco-document-list>
  </alfresco-upload-drag-area>
</div>

<context-menu-holder></context-menu-holder>


<file-uploading-dialog #fileDialog></file-uploading-dialog>

<div *ngIf="fileShowed">
  <alfresco-viewer [(showViewer)]="fileShowed"
                   [fileNodeId]="fileNodeId"
                   [overlayMode]="true">

    <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
      <template let-urlFileContent="urlFileContent" let-extension="extension" >
        <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
      </template>
    </extension-viewer>

  </alfresco-viewer>
</div>

